<template>
	<view style="margin-top: 10px;">
		<view v-for="(component, index) in components" :key="index">
			<view class="uni-list-cell" style="margin-top: 5%;">
				<view class="uni-list-cell-db">
					<text style="line-height: 100rpx;color: black;">选择工单:</text>
					<picker
						style="line-height: 100rpx;color: #BEBEBE;font-size: 32rpx; padding-left: 200px;margin-top: -50px;padding-top: -100px;"
						@change="pick($event,index)" mode='selector' :value="components[index].index"
						:range="components[index].array" class='listPicker'>
						<view style="color: green;">{{ components[index].array[components[index].index] }}</view>
					</picker>
				</view>
			</view>
		</view>
		<view v-for="(deviceId, index) in deviceIdList" :key="index">
			<view class="uni-list-cell" style="margin-top: 5%;">
				<view class="uni-list-cell-db">
					<text style="line-height: 100rpx;color: black;">选择机器序列号:</text>
					<picker
						style="line-height: 100rpx;color: #BEBEBE;font-size: 32rpx; padding-left: 200px;margin-top: -50px;padding-top: -100px;"
						@change="pick1($event,index)" mode='selector' :value="deviceIdList[index].index"
						:range="deviceIdList[index].array" class='listPicker'>
						<view style="color: green;">{{ deviceIdList[index].array[deviceIdList[index].index] }}</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="button"><button @click="onsubmit">提交</button></view>
	</view>
</template>

<script>
	import mianBan from '@/components/mianBan.vue';
	import amap from '@/static/js/amap-wx.130.js';
	export default {
		data() {
			var curDate = new Date()
			var datePickerObj = {
				yearArr: [],
				monthArr: [],
				dayArr: [],
				hoursArr: [],
				minArr: [],
				curYear: curDate.getFullYear(),
				curMonth: curDate.getMonth() + 1,
				curDay: curDate.getDate(),
				curHours: curDate.getHours(),
				curMin: curDate.getMinutes(),
			}

			for (let i = 2020; i <= curDate.getFullYear(); i++) {
				datePickerObj.yearArr.push(i)
			}

			for (let i = 1; i <= 12; i++) {
				datePickerObj.monthArr.push(i)
			}

			for (let i = 1; i <= 31; i++) {
				datePickerObj.dayArr.push(i)
			}

			for (let i = 1; i <= 24; i++) {
				datePickerObj.hoursArr.push(i)
			}

			for (let i = 1; i <= 60; i++) {
				datePickerObj.minArr.push(i)
			}

			return {
				ama: [],
				item: null,
				contentText: '',
				userList: [],
				yesOK: false,
				datePickerObj,
				defaultValue: [datePickerObj.yearArr[datePickerObj.yearArr.length - 1],
					datePickerObj.curMonth - 1, datePickerObj.curDay - 1, datePickerObj.curHours - 1, datePickerObj
					.curMin
				],
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync()
				     .screenWidth / (750 / 100))}px;`,
				dateObj: {
					nian: '',
					yue: '',
					ri: '',
					shi: '',
					fen: '',
				},
				date: new Date().toISOString(),
				deviceIdList: [],
				components: [],
				amapPlugin: null,
				gaodekey: 'a65ca3f7e4c4cf0f17d64768ce74a85e', //高德key,此处的key需要去高德平台申请获取，此key是假的！！！
				address: "", // 已经获取到的位置
				approvalStatus: '完成',
				approvalStatus1: '完成',
				approvalStatus2: '未完成',
				list: [{
					name: '审批未通过',
					ishow: false,
					list: [{
							time: '2023/05/21 13:14',
							name1: '发起人',
							main: '刘惠彬',
							succes: false,
						},
						{
							time: '2023/05/21 13:14',
							name1: '审批人员',
							main: '郭剑锋，赖光东',
							succes: false,
						},
						{
							time: '2023/05/21 13:14',
							name1: '审批通过人员',
							main: '郭剑锋,赖光东',
							succes: true,
						},
						{
							time: '2023/05/21 13:14',
							name1: '审批未通过人员',
							main: '',
							succes: false,
						}
					],
				}]
			}
		},

		components: {
			mianBan
		},
		onReady() {
			this.deviceIdList.push({
				price: 0,
				imageData: '',
				selectedOption: '',
				array: [],
				index: 0,
				matchMedia: '',
				xuliema: '',
			});
			this.components.push({
				gongdan: '',
				price: 0,
				imageData: '',
				selectedOption: '',
				array: [],
				index: 0,
				matchMedia: '',
			});

		},
		onLoad() {
			this.getLocation()
			uni.$on('workOrderNumberMsg', (data) => {
				//我把传过来的数据存到了 data 中
				this.userList = data
				//    this.userName = data.data[1]
				console.log('接收数据', data);
			})
			uni.$emit('send')
			uni.request({
				url: "https://www.smacaftersales.com:443/workOrder/workOrder/getworkOrderNumber",
				method: "POST",
				data: {
					userid: this.userList.userId,
				},
				header: {
					// "Content-type": "application/x-www-form-urlencoded",
					"Content-type": "application/json",
					// "Content-type": "multipart/form-data"
					// "Content-type": "text/xml"
				},
				success: (res) => {
					console.log(res.data)
					for (var i = 0; i < res.data.data[0].length; i++) {
						this.components[0].array.push(res.data.data[0][i])
					}
					for (var i = 0; i < res.data.data[1].length; i++) {
						this.deviceIdList[0].array.push(res.data.data[1][i])
					}
				},
			})
		},
		methods: {
			//下拉框赋值
			pick(e, index) {
				this.components[index].index = e.target.value;
			},
			pick1(e, index) {
				this.deviceIdList[index].index = e.target.value;
			},
			selectChange(event, index) {
				// 下拉框选项改变时更新数据
				// console.log("没进来吗")
				// console.log(this.components[0].options)
				this.components[index].options.value = event.detail.value;
			},
			datePickerChange(e) {
				var that = this;
				let cMonth;
				let cYear;
				console.log(e);
				let val = e.detail.value;
				cYear = that.datePickerObj.yearArr[val[0]];
				cMonth = that.datePickerObj.monthArr[val[1]];
				console.log(that.datePickerObj.hoursArr[val[3]])
				that.datePickerObj.curDay = that.datePickerObj.dayArr[val[2]];
				that.datePickerObj.curHours = that.datePickerObj.hoursArr[val[3]]
				that.datePickerObj.curMin = that.datePickerObj.minArr[val[4]]
				that.datePickerObj.curMonth = cMonth;
				that.datePickerObj.curYear = cYear;
				that.datePickerObj.dayArr = [];

				if (cMonth || y) {
					if (cMonth == 1 || cMonth == 3 || cMonth == 5 || cMonth == 7 ||
						cMonth == 8 || cMonth == 10 || cMonth == 12) {
						for (let i = 1; i <= 31; i++) {
							that.datePickerObj.dayArr.push(i)
						}
					} else if (cMonth == 4 || cMonth == 6 || cMonth == 11 || cMonth == 9) {
						for (let i = 1; i <= 30; i++) {
							that.datePickerObj.dayArr.push(i)
						}

					} else if (cMonth == 2) {
						if (that.datePickerObj.curYear % 4 == 0 &&
							(that.datePickerObj.curYear % 100 != 0 ||
								that.datePickerObj.curYear % 400 == 0)) {
							for (let i = 1; i <= 29; i++) {
								that.datePickerObj.dayArr.push(i)
							}
						} else {
							for (let i = 1; i <= 28; i++) {
								that.datePickerObj.dayArr.push(i)
							}
						}
					}

				}
			},
			dateClick() {
				this.yesOK = true;
			},
			datePickerCancel() {
				this.yesOK = false;
			},
			datePickerConfirm() {
				this.dateObj.nian = this.datePickerObj.curYear;
				this.dateObj.yue = this.datePickerObj.curMonth;
				this.dateObj.ri = this.datePickerObj.curDay;
				this.dateObj.shi = this.datePickerObj.curHours;
				this.dateObj.fen = this.datePickerObj.curMin;
				this.yesOK = false;
			},
			upload(item, i) {
				/* 打开一个关闭另外一个
				这里逻辑如果不同请自行修改 */
				this.list.forEach((val, index) => {
					if (i == index) {
						val.ishow = true
					} else {
						val.ishow = false
					}
				})
			},
			//获取坐标
			getLocation() {
				const _this = this;
				this.amapPlugin = new amap.AMapWX({
					key: this.gaodekey
				});
				uni.showLoading({
					title: '获取信息中'
				});
				// 成功获取位置
				_this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data, '当前定位');

						_this.address =
							`${data[0].regeocodeData.addressComponent.city}${data[0].regeocodeData.addressComponent.district}`;

						// _this.address 可根据自己的实际情况修改
						_this.address = `${data[0].regeocodeData.formatted_address}`;
						// 传出
						_this.$emit("lodAddress", _this.address)
						uni.hideLoading();
						this.ama = data
					},
					// 获取位置失败
					fail: (err) => {
						uni.showLoading({
							title: "获取位置失败，请重启小程序",
							icon: "error", //如果要纯文本，不要icon，将值设为'none'
							duration: 2000, //持续时间为 2秒
							mask: false,
						})

					}
				});
			},
			dateFormat1(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day;
				// return year + "-" + month + "-" + day;
			},
			dateFormat2(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				// return year + "-" + month + "-" + day;
			},
			onsubmit() {
				uni.request({
					url: "https://www.smacaftersales.com:443/punchRecord/punchRecord/afterSalesCheckIn1",
					// url: "http://192.168.3.7:8080/punchRecord/punchRecord/afterSalesCheckIn1",
					method: "POST",
					data: {
						userid: this.userList.userId,
						deviceid: this.deviceIdList[0].array[this.deviceIdList[0].index],
						workid: this.components[0].array[this.components[0].index],
						position: this.ama[0].name + this.ama[0].desc,
						lat: this.ama[0].latitude,
						lng: this.ama[0].longitude,
						clockdate: this.dateFormat1(this.date),
						clocktime: this.dateFormat2(this.date),
					},
					header: {
						// "Content-type": "application/x-www-form-urlencoded",
						"Content-type": "application/json",
						// "Content-type": "multipart/form-data"
						// "Content-type": "text/xml"
					},
					success: (res) => {
						// console.log(res.data);
						if (res.data.data == 1) {
							setTimeout(function() {
								// 页面重载
								const pages = getCurrentPages()
								// 声明一个pages使用getCurrentPages方法
								const curPage = pages[pages.length - 1]
								// 声明一个当前页面
								curPage.onLoad(curPage.options) // 传入参数
								curPage.onShow()
								curPage.onReady()
								// 执行刷新
							}, 2000);
							uni.showToast({
								title: '打卡成功',
								icon: 'success', //如果要纯文本，不要icon，将值设为'none'
								duration: 2000, //持续时间为 2秒
								mask: false,
							})
							this.timer = setTimeout(() => {
								uni.switchTab({
									url: '/pages/afterSaleVue/index/index'
								})
							}, 2100)

						} else {
							uni.showToast({
								title: '打卡失败',
								icon: 'error', //如果要纯文本，不要icon，将值设为'none'
								duration: 2000, //持续时间为 2秒
								mask: false,
							})
						}
					},
				})
			}
		}
	}
</script>

<style lang="less" scoped lang="scss">
	.popup-layout {
		position: absolute;
		bottom: 0;
		width: 100vw;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		background-color: #FFFFFF;
	}

	.popup-opera-layout {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20px 15px;
		border-bottom: black solid 1px;
	}

	.popup-opera-left {
		color: white;
		font-size: 13px;
		text-align: center;
		border-radius: 8px;
		padding: 5px 20px;
		background-color: #BEBEBE;
	}

	.popup-opera-center {
		color: #333333;
		font-size: 17px;
		text-align: center;
		border-radius: 8px;
	}


	.popup-opera-right {
		color: #FFFFFF;
		font-size: 13px;
		text-align: center;
		border-radius: 8px;
		padding: 5px 20px;
		background-color: #1cb419;
	}


	.popup-view-layout {
		background-color: #EEEEEE;
		width: 100%;
		height: 150px;
	}

	.popup-view-item {
		line-height: 50px;
		text-align: center;
		font-size: 17px;
		text-align: center;
	}

	page {
		background-color: #F8F8F8;
	}

	.button {
		margin-top: 120rpx;

		button {
			background-color: #11c53e;
			width: 90%;
			height: 85rpx;
			text-align: center;
			line-height: 85rpx;
			color: #fff;
		}
	}

	.color1 {
		color: #55ff7f;
	}

	.color2 {
		color: red;
	}
</style>